<template>
  <view v-if="list_tuijian_data && list_tuijian_data.length > 0" class="container d-shang-gao-20">
    <!-- 左滚动按钮 -->
    <view class="scroll-btn scroll-btn-left" @click="scrollToPrev">
      <uv-icon name="arrow-left" color="#9e9e9e" size="28" @click.stop="scrollToPrev"></uv-icon>
    </view>
    
    <!-- 滚动容器 -->
    <!-- 微信小程序环境使用特殊的scroll-view配置 -->
    <!-- #ifdef MP-WEIXIN -->
    <scroll-view 
      class="scroll-view" 
      scroll-x 
      scroll-into-view="{{scrollToView}}"
      @scroll="onScroll">
      <view 
        class="product-item d-you-20" 
        :style="{ width: kuan_1 + 'px' }" 
        v-for="(quan, index) in list_tuijian_data" 
        :key="index"
        :id="'scroll-item-' + index">
    <!-- #endif -->
    
    <!-- 其他平台使用常规配置 -->
    <!-- #ifndef MP-WEIXIN -->
    <scroll-view 
      class="scroll-view" 
      scroll-x 
      ref="scrollView" 
      :scroll-left="scrollLeft" 
      @scroll="onScroll"
      :scroll-with-animation="true">
      <view 
        class="product-item d-you-20" 
        :style="{ width: kuan_1 + 'px' }" 
        v-for="(quan, index) in list_tuijian_data" 
        :key="index">
    <!-- #endif -->
        
        <view class="d-beijing-baise d-yuanjiao-10 d-bianhua-10 d-tuijian-0">
            <view class="d-kuan d-xia-10">
                <view class="d-buhuanhang">
                    <view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="go_quan(quan.quan_id)">
                        <image v-if="quan.quan_tubiao" :src="quan.quan_tubiao" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-img-anhei"></image>
                        <image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-img-anhei"></image>
                    </view>
                    <view class="d-kuan d-zuo-10" @click="go_quan(quan.quan_id)">
                        <view class="d-wenzi-14 d-jiacu d-wenzi-hei">{{ quan.quan_ming }} </view>
                        <view class="d-wenzi-yanse-hui d-buhuanhang">							<uv-icon name="file-text" color="#a8a8a8" size="18" :label="'主题：'+quan.quan_tieshu" labelSize="12px" class="d-you-10"></uv-icon>
							<uv-icon name="account-fill" color="#a8a8a8" size="18" labelSize="12px" :label="'成员：'+quan.quan_huiyuan"></uv-icon>
						</view>
                    </view>
                </view>
            </view>
            <uv-line color="#dddddd" class="d-xia-10 d-clear"></uv-line>
			<uv-list class="d-chaochu-1">
			    <uv-list-item v-for="(tie, index2) in quan.tie" :key="index2" ellipsis="1" :title="tie.tie_title" :clickable="true" @click="tiezi(tie.tie_id,tie.quan_id)"></uv-list-item>
			</uv-list>
        </view>
      </view>
    </scroll-view>
    
    <!-- 右滚动按钮 -->
    <view class="scroll-btn scroll-btn-right" @click="scrollToNext">
        <uv-icon name="arrow-right" color="#9e9e9e" size="28" @click.stop="scrollToNext"></uv-icon>
    </view>
  </view>
</template>


<script>
import QuanApi from '@/utils/quan_api.js';
import { getRequest, postRequest } from '@/utils/wxRequest.js';

export default {
    name: 'DTuijian',
    props: {
        kuan: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            productList: [],
            scrollLeft: 0,
            kuan_1: 0,
            list_tuijian_data: [],
            isBtnScrolling: false, // 用于按钮点击防抖
            currentIndex: 0, // 当前显示的索引
            scrollToView: '' // 微信小程序专用，用于scroll-into-view
        };
    },
    watch: {
        kuan: {
            handler(newValue) {
                // 根据屏幕宽度设置合适的卡片宽度
                if (this.$store && this.$store.state && this.$store.state.kuan) {
                    this.kuan_1 = this.$store.state.kuan.windowWidth < 500 ? 250 : 310;
                } else {
                    this.kuan_1 = 310;
                }
            },
            immediate: true
        },
        currentIndex: {
            handler(newIndex) {
                // 微信小程序环境下，通过scroll-into-view滚动
                // #ifdef MP-WEIXIN
                this.scrollToView = 'scroll-item-' + newIndex;
                // #endif
                
                // 其他平台通过scrollLeft滚动
                // #ifndef MP-WEIXIN
                this.scrollLeft = newIndex * this.kuan_1;
                // #endif
            }
        }
    },
    mounted() {
        // 初始化数据
        this.get_tuijian_api();
    },
    methods: {
        // 滚动到下一项
        scrollToNext() {
            if (this.isBtnScrolling || !this.list_tuijian_data.length) return;
            this.isBtnScrolling = true;
            
            // 计算下一个索引
            const nextIndex = Math.min(this.currentIndex + 1, this.list_tuijian_data.length - 1);
            this.currentIndex = nextIndex;
            
            // 防止重复点击
            setTimeout(() => {
                this.isBtnScrolling = false;
            }, 300);
        },
        
        // 滚动到上一项
        scrollToPrev() {
            if (this.isBtnScrolling || !this.list_tuijian_data.length) return;
            this.isBtnScrolling = true;
            
            // 计算上一个索引
            const prevIndex = Math.max(0, this.currentIndex - 1);
            this.currentIndex = prevIndex;
            
            // 防止重复点击
            setTimeout(() => {
                this.isBtnScrolling = false;
            }, 300);
        },
        
        // 监听滚动事件
        onScroll(e) {
            // 非微信小程序环境下，更新滚动位置
            // #ifndef MP-WEIXIN
            this.scrollLeft = e.detail.scrollLeft;
            
            // 根据滚动位置更新当前索引
            const index = Math.round(this.scrollLeft / this.kuan_1);
            if (index >= 0 && index < this.list_tuijian_data.length) {
                this.currentIndex = index;
            }
            // #endif
        },
        
        // 获取推荐圈子数据
        get_tuijian_api() {
            getRequest(QuanApi.get_tuijian_quan()).then(duixin_data => {
                if (duixin_data.data && duixin_data.data.code) {
                    this.list_tuijian_data = duixin_data.data.data && duixin_data.data.data.list || [];
                }
            }).catch(err => {
                //console.error('获取推荐圈子数据失败:', err);
            });
        },
        
        // 跳转到圈子页面
        go_quan(id) {
            try {
                uni.navigateTo({
                    url: '/pages/quanzi/index?id=' + id,
                    fail: (err) => {
                        console.error('跳转失败:', err);
                    }
                });
            } catch (e) {
                console.error('跳转异常:', e);
            }
        },
        
        // 跳转到帖子页面
        tiezi(id, cid) {
            try {
                uni.navigateTo({
                    url: '/pages/tiezi/index?id=' + id + '&cid=' + cid,
                    fail: (err) => {
                        console.error('跳转失败:', err);
                    }
                });
            } catch (e) {
                console.error('跳转异常:', e);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 250px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden; // 防止内容溢出
}

.scroll-view {
    white-space: nowrap; // 确保子元素横向排列
    overflow-x: auto; // 允许水平滚动
    overflow-y: hidden; // 隐藏垂直滚动
    flex: 1; // 占据剩余空间
    height: 100%;
    -webkit-overflow-scrolling: touch; // 为iOS设备提供平滑滚动
    transform: translateZ(0); // 启用硬件加速，减少页面闪动
    /* 在微信小程序中，以下滚动条样式可能不起作用 */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* 针对Webkit浏览器的滚动条样式 - 在H5端隐藏 */
.container ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.container ::-webkit-scrollbar-track {
    background: transparent;
}

.container ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
}

/* 滚动按钮样式 */
.scroll-btn {
    position: absolute;
    width: 30px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.scroll-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.scroll-btn-left {
    left: 5px;
}

.scroll-btn-right {
    right: 5px;
}

/* 产品项样式 */
.product-item {
    display: inline-block;
    height: 250px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top; // 确保所有元素顶部对齐
}

/* 间距样式 */
.d-shang-gao-20 {
    margin-top: 40rpx;
}

.d-you-20 {
    margin-right: 20rpx;
}

/* 响应式样式 */
@media screen and (max-width: 1220px) {
    .d-you-20 {
        margin-right: 20rpx;
    }
    .d-shang-gao-20 {
        margin-top: 20rpx;
    }
}

@media screen and (max-width: 500px) {
    /* 在小屏幕上隐藏滚动按钮 */
    .scroll-btn-left,
    .scroll-btn-right {
        display: none;
    }
    
    /* 调整容器高度 */
    .container {
        height: 230px;
    }
    
    .product-item {
        height: 230px;
    }
}
</style>
